<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>城市选择联动</title>
</head>
<body>
	<select name="" id="sel1">
		<option value="">请选择</option>
	</select>
	<select name="" id="sel2">
		<option value="">请选择</option>
	</select>
	<select name="" id="sel3">
		<option value="">请选择</option>
	</select>


	<script src="china_area.js"></script>
	<script>
		var sel1 = document.getElementById('sel1');
		var sel2 = document.getElementById('sel2');
		var sel3 = document.getElementById('sel3');
		var html = "<option value=\"请选择\">请选择</option>";
		for(var i = 0;i<provinceJson.length;i++){
			html += "<option value='"+provinceJson[i].id+"'>"+provinceJson[i].province+"</option>"
		}
		sel1.innerHTML = html;


		sel1.onchange = function(){
			var val = this.value;
			var html = "<option value=\"请选择\">请选择</option>";
			for(var i = 0;i<cityJson.length;i++){
				if(cityJson[i].parent == val || val == cityJson[i].id){
					html+="<option value='"+cityJson[i].id+"'>"+cityJson[i].city+"</option>"
				}
			}
			sel2.innerHTML = html;
			sel3.innerHTML = "<option value=\"请选择\">请选择</option>";
		}
		sel2.onchange = function(){
			var val = this.value;
			var html = "<option value=\"请选择\">请选择</option>";
			for(var i = 0;i<countyJson.length;i++){
				if(countyJson[i].parent==val){
					html+="<option value='"+countyJson[i].id+"'>"+countyJson[i].county+"</option>"
				}
			}
			sel3.innerHTML = html;
		}
	</script>
</body>
</html>